<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="control">
              <button>选项1</button>
              <button>选项2</button>
              <button>选项3</button>
        </div>
        <div class="content">
              <div class="box">内容1</div>
              <div class="box">内容2</div>
              <div class="box">内容3</div>
        </div>
  </div>
    <script>

        function Table (btn_selector , content_selector){
            this.btns = document.querySelectorAll(btn_selector);
            this.contents = document.querySelectorAll(content_selector);
            this.index = 0;
            this.bindEvent()
        }
        // 事件绑定
        Table.prototype.bindEvent = function(){
            var self = this;
            this.changeTable()
            for(var i = 0; i< self.btns.length; i++){
                self.btns[i].index = i;
                self.btns[i].onclick = function(){
                    self.index = this.index;
                    self.changeTable();
                }        
            }
        }
        // 内容的切换
        Table.prototype.changeTable = function(){
            var self = this;
            for (var i = 0; i<self.contents.length; i++){
                self.contents[i].style.display = "none";
            }
            self.contents[self.index].style.display = "block";
        }
        var tab1 = new Table (".control button",".box");
    </script>
</body>
</html>